<!-- 自定义tabbar呈现 -->
<template>
	<view>
		<index v-if="PageCur == 'index'"></index>
		<control v-if="PageCur == 'control'"></control>
		<user v-if="PageCur == 'user'"></user>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="index">
				<view class="" :class="PageCur == 'index' ? 'cuIcon-homefill text-blue' : 'cuIcon-home text-black'"></view>
				<view :class="PageCur == 'index' ? 'text-blue' : 'text-black'">{{ $t('tabbar.index') }}</view>
			</view>
			<view class="action" @click="NavChange" data-cur="control">
				<view class="" :class="PageCur == 'control' ? 'cuIcon-repairfill text-blue' : 'cuIcon-repair  text-black'"></view>
				<view :class="PageCur == 'control' ? 'text-blue' : 'text-black'">{{ $t('tabbar.control') }}</view>
			</view>
			<view class="action" @click="NavChange" data-cur="user">
				<view class="" :class="PageCur == 'user' ? 'cuIcon-myfill text-blue' : 'cuIcon-my text-black'"></view>
				<view :class="PageCur == 'user' ? 'text-blue' : 'text-black'">{{ $t('tabbar.user') }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			PageCur: 'index'
		};
	},
	onLoad(options) {
		console.log('options=', options);
		console.log('this.$Route.query=', this.$Route.query);
		this.PageCur = options.query || 'index';
	},
	onShow() {
		console.log('this.PageCur =', this.PageCur);
	},
	methods: {
		NavChange: function(e) {
			console.log('NavChange==', e);
			this.PageCur = e.currentTarget.dataset.cur;
		}
	}
};
</script>

<style></style>
